<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { vercode, uploadPassword } from '@/apis/apis.js'
import useUserStore from '@/stores/useUserStore.js'
import emitter from '@/utils/mitt.js'

const phone = ref('')
const code = ref('')
const bizId = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const throttle = ref(false)
const buttonText = ref('发送验证码')
const countDown = ref(60)
const newPwdErrMsg = ref('')
const confirmPwdErrMsg = ref('')
const loading = ref(false)
const userStore = useUserStore()
const router = useRouter()

const sendCode = async () => {
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    return showToast({ message: '请输入正确的手机号', duration: 500 })
  }
  const res = await vercode({ phoneNumbers: phone.value })
  bizId.value = res.data.bizId
  throttle.value = true
  buttonText.value = `${countDown.value}s后重新获取`
  let interval = setInterval(() => {
    if (countDown.value > 1) {
      countDown.value--
      buttonText.value = `${countDown.value}s后重新获取`
    }
    else {
      countDown.value = 60
      buttonText.value = '发送验证码'
      throttle.value = false
      clearInterval(interval)
    }
  }, 1000)
}

const submit = async () => {
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    return showToast({ message: '请输入正确的手机号', duration: 500 })
  }
  if (!/^\d{4}$/.test(code.value)) {
    return showToast({ message: '请输入正确的验证码', duration: 500 })
  }
  if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/.test(newPassword.value)) {
    return showToast({ message: '请输入正确的新密码', duration: 500 })
  }
  if (confirmPassword.value !== newPassword.value) {
    return showToast({ message: '请输入正确的确认密码', duration: 500 })
  }
  loading.value = true
  await uploadPassword({ mobile: phone.value, code: code.value, bizId: bizId.value, password: newPassword.value })
  loading.value = false
  userStore.deleteUser()
  router.push('/')
  emitter.emit('openLogin', { show: true })
}

watch(newPassword, () => {
  if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/.test(newPassword.value)) {
    newPwdErrMsg.value = '密码需要6-20位大小写字母+数字组成'
  }
  else {
    newPwdErrMsg.value = ''
  }
}, {
  immediate: true
})

watch(confirmPassword, () => {
  if (confirmPassword.value !== newPassword.value) {
    confirmPwdErrMsg.value = '两次输入的密码不一致'
  }
  else {
    confirmPwdErrMsg.value = ''
  }
})
</script>

<template>
  <div class="view">
    <div class="phone-and-code">
      <van-field v-model="phone" type="number" label="手机号" placeholder="请输入手机号" />
      <van-field v-model="code" type="number" center label="验证码" placeholder="请输入验证码">
        <template #button>
          <van-button size="small" type="success" @click="sendCode" :disabled="throttle">{{ buttonText }}</van-button>
        </template>
      </van-field>
    </div>
    <div class="new-and-confirm">
      <!-- 密码需要6-20位大小写字母+数字组成 -->
      <van-field v-model.trim="newPassword" type="password" label="新密码" placeholder="6-20位大小写字母+数字组成"
        :error-message="newPwdErrMsg" />
      <van-field v-model.trim="confirmPassword" :error-message="confirmPwdErrMsg" type="password" label="确认密码"
        placeholder="请再次输入新密码" />
    </div>
    <div class="submit">
      <van-button type="success" size="large" @click="submit" :loading="loading" loading-text="更新中...">确定</van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.view {
  padding: 20px 10px;
  height: 100vh;
  background-color: #f0f6fa;

  .phone-and-code {
    margin-bottom: 40px;
  }

  .new-and-confirm {
    margin-bottom: 50px;
  }

  .submit {
    display: flex;
    justify-content: center;

    .van-button {
      width: 80%;
    }
  }
}
</style>
